* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
}
html,body {
    font-size: 26.6666vw;
}


// 变量
$background: #999;
$color: red !default;
$borderradius: 0.15rem;
// 全局变量
$showdow: 0.1rem 0.15rem 0.2rem black !global;


.wrap-box {
    width: 1.6rem;
    height: 2rem;
    // background: gray;
    font-size: 0.16rem;
    margin: .1rem;
    // 属性嵌套 不会编译进去
    /*属性嵌套 会被编译进去*/
    border: {
        top: 0.01rem solid red;
        bottom: 0.01rem solid rgba(10, 14, 145, 0.436);
        left: 0.01rem solid blue;
        right: 0.02rem dashed green;
    }
    border-radius: $borderradius;
    box-shadow: $showdow;
    .title {
        // 局部变量---就近原则
        $borderradius: 0.1rem;
        color: $color;
        background-color: $background;
        border-radius: $borderradius;
    }
}



// 支持list
// 空格分割
$colors: rgb(9, 157, 34) red yellow;
// 逗号分割
$fontSize: 0.16rem, 0.24rem, 0.12rem;
.wrap-box2 {
    background-color: nth($colors , 1);
    width: 2rem;
    height: 2rem;
    .title2 {
        font: {
            size: nth($fontSize, 2);
            weight: 400;
        }
        color: nth($colors , 3);
    }
}

// 运算
.wrap-box3 {
    $w: 20px;
    $h: 30px;
    $size: 0.16rem;
    $bd: 'border-top';
    width: 13rem - (4rem * 3);
    height: 1rem - .1rem;
    border-radius: (2rem / 2);
    background: {
        color: nth($colors, 2);
    }
    font: {
        // size: $w/2;
        size: #{$h};
    }
    // 变量在选择器中使用
    #{$bd}: 0.1rem solid rgb(74, 186, 18);
    &::after {
        // 字符串拼接 和变量使用
        content: 'Fir' + '123#{$w}';
        font: {
            size: $size;
        }
    }
    &::before {
        // 变量在属性中使用
        content: 'before' + bd;
    }
}

